<template>
    <view class="wrapper">
        <view class="title">请选择你的性别</view>
        
        <!-- 
            1. radio-group 包裹所有 radio
            2. v-model 绑定在 radio-group 上，而非 radio 上
            3. radio 的 value 属性是真正提交的值
        -->
        <radio-group v-model="selectedGender" @change="genderChange">
            <label class="radio-item" v-for="item in genders" :key="item.value">
                <radio :value="item.value" />
                <text>{{item.name}}</text>
            </label>
        </radio-group>
        
        <view class="result">
            你选择的是：{{selectedGender}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 1. 定义v-model绑定的变量
                selectedGender: 'male', // 默认选中 'male'
                
                // 2. 定义选项列表
                genders: [
                    { name: '男', value: 'male' },
                    { name: '女', value: 'female' },
                    { name: '保密', value: 'secret' }
                ]
            }
        },
        methods: {
            genderChange(e) {
                // e.detail.value 能拿到最新的值
                console.log('性别已变为：', e.detail.value);
                // 注意：因为v-model的存在，this.selectedGender 此时已经自动更新了
                // 我们不需要写 this.selectedGender = e.detail.value
            }
        }
    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}
.radio-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.radio-item text {
    margin-left: 10px;
}
.result {
    margin-top: 20px;
    padding: 10px;
    background-color: #f4f4f4;
}
</style>